<template>
  <div class="main">
    <div class="main-header">
      <h3 class="font-34">Task Center</h3>
      <h1 class="font-40">发布任务，红人主动接单</h1>
      <p class="font-16">通过创建一个接单任务，填入您的要求和报酬，红人在任务广场看到后，感兴趣的会主动和您联系。</p>
    </div>

    <form-search :list="searchList" :info="form" column="3" @confirm="searchConfirm"></form-search>

    <div class="wrap">
      <div class="wrap-btns flex">
        <p class="font-14 pointer" @click="toEdit(null)">新建任务</p>
      </div>
      <el-table :data="tableData" height="420" style="width: 100%;" class="table">
        <el-table-column width="80">
          <template #default="scope">
            <i class="iconfont pointer"
              :class="scope.row.collect ? 'icon-guanzhu-yiguanzhu' : 'icon-guanzhu-weiguanzhu'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="创建时间" width="180" />
        <el-table-column prop="value" label="任务名称" width="200" />
        <el-table-column label="接单红人数" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="广告主确认数" width="110">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="达成合作数" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="状态" width="100" />
        <el-table-column prop="value" label="是否到期" width="190" />
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <div class="row-btns flex flex-align-items-center">
              <p class="row-btn font-14 pointer" @click="toDetail(scope.row)">详情</p>
              <span class="line"></span>
              <p class="row-btn font-14 pointer" @click="toEdit(scope.row)">编辑</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination flex flex-align-items-center">
        <el-pagination layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>
</template>

<script setup>
import FormSearch from '../../components/formSearch.vue';
import { ref } from 'vue';
import numConvert from '@/js/numConvert';
import { useRouter } from 'vue-router';

const router = useRouter();

const searchList = [
  {
    label: '创建时间',
    type: 'daterange',
    key: 'date'
  },
  {
    label: '任务名称',
    type: 'input',
    key: 'taskName'
  },
  {
    label: '状态筛选',
    type: 'select',
    key: 'status',
    options: [
      {
        label: '未合作',
        value: 1
      },
      {
        label: '已合作',
        value: 2
      }
    ]
  },
  {
    label: '重点任务',
    type: 'select',
    key: 'asterisk',
    options: [
      {
        label: '是',
        value: 1
      },
      {
        label: '否',
        value: 2
      }
    ]
  }
];

const form = ref({
  total: 100
});
const tableData = ref([
  {
    id: 1,
    value: 'xxxx',
    count: 815324
  }
]);

const searchConfirm = e => {
  form.value = {
    ...e
  };
}
const toDetail = e => {
  router.push(`/taskDetail?id=${e.id}`);
}
const toEdit = e => {
  let url = `/editTask`;
  if (e) {
    url += `?id=${e.id}`;
  }
  router.push(url);
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px;
}

.main-header {
  height: 330px;
  padding: 26px 48px;
  background-image: url(@/assets/bg-task.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 2px;
  margin-bottom: 16px;

  h3 {
    height: 48px;
    color: hsla(0, 0%, 60%, .15);
    text-shadow: 0 8px hsla(0, 0%, 60%, .08);
    margin-bottom: 24px;
  }

  h1 {
    line-height: 41px;
    color: rgba(51, 51, 51, .85);
    margin-bottom: 32px;
  }

  p {
    width: 600px;
    color: hsla(0, 0%, 40%, .85);
    line-height: 24px;
  }
}

.wrap {
  background: #fff;
  padding: 16px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);

  .wrap-btns {
    margin-bottom: 16px;

    p {
      min-width: 70px;
      padding: 0 8px;
      height: 32px;
      border-radius: 2px;
      text-align: center;
      line-height: 32px;
      background: @main-color;
      color: #fff;
    }
  }

  .table {
    &::v-deep {
      .el-table__cell {
        height: 80px;
      }
    }

    .icon-guanzhu-yiguanzhu {
      color: @main-color;
    }
  }

  .pagination {
    justify-content: end;
    height: 64px;
  }
}
</style>
